/* eslint-disable prefer-const */
import imgTrafficOff from '@/assets/traffic-off.svg';
import imgTrafficOn from '@/assets/traffic-on.svg';
import TauPage from '@/components/TauPage';
import { useStore } from '@/hooks';
import { Box, Button, Icon } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useRef, useState } from 'react';
import { CityListControl, DistanceTool, Map, ScaleControl, TrafficLayer, ZoomControl } from 'react-bmapgl';
import './ani.scss';
import TraceMap from './components/TraceMap';
import TracePanel from './components/TracePanel';
import VehicleMap from './components/VehicleMap';
import VehiclePanel from './components/VehiclePanel';
import styles from './index.module.scss';

const t_coord = { lng: 113.939512247121, lat: 22.5438913313581 };

const TaskMap = observer(() => {
  const mapRef = useRef();
  const toolRef = useRef();
  const { taskMapStore: store } = useStore();
  const [tools, setTools] = useState({ showTraffic: false });
  const [panelState, setPanelState] = useState({ className: '', showInfo: false });
  const [tab, setTab] = useState(0);

  useEffect(() => {
    store.mapContext.mapRef = mapRef.current.instance;
    // mapRef.current.instance.setDisplayOptions({ building: false });
    // mapRef.current.instance.addEventListener('zoomend', () => console.log('.000000000'));
  }, []);

  const togglePanel = () => {
    setPanelState({ ...panelState, className: panelState.className === 'panel-collpase' ? 'panel-normal' : 'panel-collpase' });
  };

  return (
    <TauPage className={`page-container ${styles.pageContainer}`} >
      {panelState.showInfo &&
        <Button className="info-btn" onClick={() => togglePanel()} iconSize={16} >
          <Icon type="prompt" />
        </Button>}
      <div
        className={`panel ${panelState.className}`}
        onAnimationStart={() => setPanelState({ ...panelState, showInfo: false })}
        onAnimationEnd={() => setPanelState({ ...panelState, showInfo: panelState.className === 'panel-collpase' })}
      >
        <Box className="header" align="center" justify="center" style={{ cursor: 'pointer' }} onClick={() => togglePanel()}>
          {panelState.className !== 'panel-collpase' && <span>{t`车辆信息`}</span>}
          <Icon className="iconfont icon-collapse btn-panel-collpase" size={18} />
        </Box>
        <Box direction="row" className="head-tab" align="center" justify="space-around">
          <Button text onClick={() => setTab(0)} style={{ flex: 1 }}>
            <Icon className="iconfont icon-shishijiankong" />
            <span>{t`实时位置`}</span>
          </Button>
          <Button text onClick={() => setTab(1)} style={{ flex: 1 }}>
            <Icon className="iconfont icon-guiji" />
            <span>{t`轨迹查询`}</span>
          </Button>
        </Box>
        <div className={'triangle'} style={{ left: 74 + tab * 150 }} />
        <div className="content">
          {tab === 0 && <VehiclePanel />}
          {tab === 1 && <TracePanel />}
        </div>
      </div>
      <div className="btn-traffic" onClick={() => setTools({ ...tools, showTraffic: !tools.showTraffic })} title={tools.showTraffic ? t`隐藏路况` : t`显示路况`}>
        <img src={tools.showTraffic ? imgTrafficOn : imgTrafficOff} />
      </div>
      <div className="btn-ruler" onClick={() => toolRef.current.distancetool.open()} title={t`测距`}>
        <Icon className="iconfont icon-ceju" />
      </div>
      <Map
        ref={mapRef}
        style={{ position: 'relative', height: '100%' }}
        center={t_coord}
        enableScrollWheelZoom
        // displayOptions={{ building: true }}
      >
        {tab === 0 && <VehicleMap />}
        {tab === 1 && <TraceMap />}
        <CityListControl anchor={1} />
        {tools.showTraffic && <TrafficLayer />}
        <DistanceTool defaultOpen={false} ref={toolRef} />
        <ZoomControl />
        <ScaleControl />
        {/* <InfoWindow position={coord} text="内容" title="标题" /> */}
      </Map>
    </TauPage>
  );
});

export default TaskMap;
